<script setup lang="ts">
import { ref } from 'vue'
import { useDropZone } from '@vueuse/core'
const filesData = ref<{ name: string; size: number; type: string; lastModified: number }[]>([])
function onDrop(files: File[] | null) {
  filesData.value = []
  if (files) {
    console.log(files);
    filesData.value = files.map(file => ({
      name: file.name,
      size: file.size,
      type: file.type,
      lastModified: file.lastModified,
    }))
  }
}
const dropZoneRef = ref<HTMLElement>()
const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
</script>

<template>
  <div>
    <div>
      <p>拖拽文件到绿色区域</p>
      <img src="/favicon.ico" alt="Drop me">

      <div ref="dropZoneRef" class="useDropZone">
        <div> 是否拖拽到区域上方:{{isOverDropZone}}</div>
        <div >
          <div v-for="(file, index) in filesData" :key="index">
            <p>Name: {{ file.name }}</p>
            <p>Size: {{ file.size }}</p>
            <p>Type: {{ file.type }}</p>
            <p>Last modified: {{ file.lastModified }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.useDropZone {
  padding: 24px;
  background-color: aquamarine;
}
</style>